<template>
    <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>
</template>

<script>
import {ref} from "vue"
import Mapbox from "@/components/common/Mapbox.component.vue"
import MapboxCommonService from "@/service/map/MapboxCommonService"

export default {
    name: "ChangeSymbolPosition.component",
    components: {Mapbox},
    setup() {

        let mapStore = ref({});
        let mapOnLoadCB = (map) => {
            mapStore.value = map;
            MapboxCommonService.setCZBP(map, [0, 0], 0)

            // 使用实时 GeoJSON 数据流来移动地图上的符号 symbol。
            const url = 'https://wanderdrone.appspot.com/'
            window.setInterval(() => {
                map.getSource('drone').setData(url);
            }, 2000);

            map.addSource('drone', {type: 'geojson', data: url});
            map.addLayer({
                "id": "drone",
                "type": "symbol",
                "source": "drone",
                "layout": {
                    "icon-image": "rocket-15"
                }
            });
        };

        return {
            mapOnLoadCB,
        }
    }
}
</script>

<style scoped lang="scss">

</style>